﻿<template>
  <div>
    <!-- 标题部分 -->
    <V-Title :titleName = 'titleName'></V-Title>
    <div class = 'page_mainContent' v-loading = 'loading'>
      <!-- 检索部分 -->
      <el-form label-width = '90px'>
        <el-row :gutter = '10'>
          <el-col :span = '10' style = 'height:52px'>
            <el-form-item label = "仪表板名称：">
              <el-input placeholder = '请输入名称进行检索' clearable v-model = 'requestParams.filter'></el-input>
            </el-form-item>
          </el-col>
          <el-col :span = '4' style = 'height:52px'>
            <el-button @click = 'getSearchInfo' type = 'primary'>查询</el-button>
          </el-col>
        </el-row>
      </el-form>
      <!-- 表格部分 -->
      <div class = 'page_tableContent'>
        <el-table :data = 'tableData' style = 'width:100%' stripe border>
          <el-table-column align = 'center' v-for = 'item in tableColumn' :key = 'item.indexName' :label = 'item.text'>
            <template slot-scope = 'scope'>
              <span>{{scope.row[item.indexName]}}</span>
            </template>
          </el-table-column>
          <el-table-column label = "操作" align = "center" width = '360'>
            <template slot-scope = "scope">
              <el-button type = 'text' @click = "handleSetting(scope.row)"><i class = 'iconfont icon-upload'></i>配置设定</el-button>
              <el-button type = 'text' @click = "handleMenu(scope.row)"><i class = 'iconfont icon-upload'></i>生成菜单</el-button>
              <el-button type = 'text' @click = "handleEdit(scope.row)"><i class = 'iconfont icon-bianji'></i>编辑</el-button>
              <el-button type = 'text' @click = "handleDelete(scope.row)"><i class = 'iconfont icon-shanchu'></i>删除</el-button>
              <el-button type = 'text' @click = "handlePreview(scope.row)"><i class='iconfont icon-yanj'></i>预览</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 底部按钮和页码部分 -->
      <div class = 'page_bottomContent'>
        <div class = 'page_btnsContent'>
          <el-button type = "primary" @click = 'handleAdd ()'>新增</el-button>
        </div>
        <div class='page_paginationContent'>
          <el-pagination
            background
            @size-change = "handleSizeChange"
            @current-change = "handleCurrentChange"
            :current-page.sync = "requestParams.page"
            :page-size = 'requestParams.limit'
            :pager-count = "5"
            :page-sizes = "[10, 25, 50, 100]"
            layout = "total, sizes, prev, pager, next"
            :total = 'totalLength'>
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 编辑和添加页面的弹窗 -->
    <BasicForm :dialogInfo = 'basicDialogInfo'
    @operationBasicSuccess = 'operationBasicSuccess'
    @operationReset = 'basicDialogInfo.dialogFormVisible = false'></BasicForm>
    <!-- 预览的界面 -->
    <BiPreview :previewUid = 'previewUid' :previewVisible = 'previewVisible'
    @closePreviewDialog = 'previewVisible = false'></BiPreview>
    <!-- 生成菜单的弹窗 -->
    <V-Menu :menuDialog = 'menuDialog' :functionObj = 'functionObj' @giveUpFunc = 'menuDialog = false'></V-Menu>
  </div>
</template>

<script src = './biDashboardPage.js'></script>
